<!-- 排行榜 -->
<template>
  <div class="rankingListMain">
    <div class="rankingSong">
      <div class="rankingSong-info">
        <div class="infoUrl">
          <img :src="rankingList.coverImgUrl" alt="" />
        </div>
        <div class="infoMain">
          <div class="info-title">
            {{ rankingList.name }}
            <span>（{{ timeFilter(rankingList.updateTime) }} 更新）</span>
          </div>

          <div class="info-avatar">
            <span>
              <img :src="rankingList.creator?.avatarUrl" alt="" />
            </span>
            <span>
              {{ rankingList.creator?.nickname }}
            </span>
            <span>
              {{ timeFilter(rankingList.createTime) }}
            </span>
          </div>

          <div class="info-data">
            <span>
              <el-icon size="16" style="padding-right: 3px"> <Star /> </el-icon>
              {{ playCountFilter(rankingList.subscribedCount) }}
            </span>
            <span>
              <el-icon size="16" style="padding-right: 3px">
                <Headset />
              </el-icon>
              {{ playCountFilter(rankingList.playCount) }}
            </span>

            <span>
              <el-icon size="16" style="padding-right: 3px">
                <ChatLineSquare />
              </el-icon>
              {{ playCountFilter(rankingList.commentCount) }}
            </span>
          </div>
          <div>歌单简介</div>
          <div class="info-des">{{ rankingList.description }}</div>
        </div>
      </div>
      <div class="rankingSong-list">
        <div class="songListHeader">
          <span>
            <span class="songHeaderTitle">歌曲列表</span>
            <span class="songNum">100首歌</span>
          </span>
          <span>
            <el-button color="#e60026" round :icon="VideoPlay"
              >播放全部</el-button
            >
            <el-button round :icon="Star">收藏</el-button>
          </span>
        </div>
        <div class="songListMain">
          <div class="songItem" style="font-weight: 600; color: #999">
            <span class="songindex">序号</span>
            <span class="songTitle">歌曲</span>
            <span class="songTitle">歌手</span>
            <span class="songTitle">专辑</span>
          </div>
          <div
            class="songItem"
            v-for="(item, index) in rankingList.tracks"
            :key="item.id"
          >
            <span class="songindex">{{ index + 1 }}</span>
            <span class="songTitle">
              {{ item.name }}
            </span>
            <span class="songTitle">
              <span v-for="jitem in item.ar" :key="jitem.id">
                {{ jitem.name }}
              </span>
            </span>
            <span class="songTitle">
              {{ item.al.name }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="rankingClassify">
      <div class="songHotList">
        <div class="songHotItem songHotActive">TOP榜</div>
        <div class="songHotItem">特色榜</div>
        <div class="songHotItem">场景榜</div>
      </div>

      <div class="songHotClassify">
        <!-- classifyActive -->
        <div
          class="songHotClassifyItem"
          v-for="(item, index) in allListInfoData"
          :key="index"
        >
          <div class="songHotClassifyInfo">
            <b>{{ item.name }}</b>
            <div>{{ item.updateFrequency }}</div>
          </div>
          <div class="songHotClassifyImage">
            <img :src="item.coverImgUrl" alt="" />
          </div>
        </div>
        <div class="songHotClassifyItem"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, inject } from "vue";
import { VideoPlay, Star } from "@element-plus/icons-vue";
import moment from "moment";
const axios = inject("$axios");
const rankingList = ref({});
const allListInfoData = ref([]);

// 排行榜
const getHotRecommend = async () => {
  const { data: resData } = await axios.get(
    "http://127.0.0.1:3000/playlist/detail?id=19723756&s=-1"
  );
  rankingList.value = resData.playlist;
};

// 所有榜单
const allListInfo = async () => {
  const { data: resData } = await axios.get(
    "http://127.0.0.1:3000/toplist/detail"
  );

  allListInfoData.value = resData.list;
};

// 处理播放数过万
const playCountFilter = (num: number) => {
  if (num > 9999) {
    return Math.round(num / 1000) / 10 + "万";
  } else {
    return num;
  }
};

const timeFilter = (time: number) => {
  return moment(time).format("YYYY-MM-DD");
};

onMounted(() => {
  getHotRecommend();
  allListInfo();
});
</script>
<style scoped lang="scss">
.rankingListMain {
  display: flex;
  .rankingSong {
    flex: 1;
    .rankingSong-info {
      height: 200px;
      margin-bottom: 20px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .infoUrl {
        height: 200px;
        border-radius: 8px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .infoMain {
        flex: 1;
        margin-left: 20px;
        background-color: #fff;
        height: 200px;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 15px;
        font-size: 14px;

        .info-title {
          font-size: 22px;
          font-weight: 600;
          span {
            font-weight: 500;
            font-size: 14px;
            color: #999;
          }
        }

        .info-avatar {
          display: flex;
          margin-top: 10px;
          align-items: center;
          span {
            padding-right: 10px;
            color: #999;
            img {
              width: 30px;
              height: 30px;
              vertical-align: middle;
              border-radius: 50%;
            }
          }
        }

        .info-data {
          margin: 12px 0px;
          margin-bottom: 25px;
          display: flex;

          span {
            padding-right: 15px;
            color: #999;
            font-size: 12px;
            display: flex;
            align-items: center;
          }
        }

        .info-des {
          margin-top: 5px;
          color: #999;
        }
      }
    }

    .rankingSong-list {
      box-sizing: border-box;
      padding: 15px;
      border-radius: 8px;
      background-color: #fff;

      .songListHeader {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 20px;

        .songHeaderTitle {
          font-size: 18px;
          font-weight: bold;
          padding-right: 15px;
        }

        .songNum {
          color: #999;
          font-size: 12px;
        }
      }

      .songItem {
        height: 45px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px #f3f3f3 solid;
        .songindex {
          display: inline-block;
          width: 120px;
        }

        .songTitle {
          flex: 1;
        }
      }
    }
  }

  .rankingClassify {
    width: 500px;
    margin-left: 20px;
    .songHotList {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .songHotItem {
        width: 30%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #fff;
        border-radius: 10px;
        font-size: 14px;
        font-weight: bold;
        box-shadow: 0 20px 27px #0000000d;
      }

      .songHotActive {
        background-color: #e60026;
        color: #fff;
      }
    }

    .songHotClassify {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-top: 15px;

      .songHotClassifyItem {
        width: 46%;
        background-color: #fff;
        height: 65px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        align-items: center;
        box-shadow: 0 20px 27px #0000000d;
        justify-content: space-between;
        margin-bottom: 15px;
        cursor: pointer;

        .songHotClassifyInfo {
          font-size: 12px;
          color: #999;
          b {
            font-size: 14px;
            color: #000;
            padding-bottom: 3px;
            max-width: 160px;
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: top;
          }
        }

        .songHotClassifyImage {
          height: 40px;
          width: 40px;
          background-color: #f3f3f3;
          border-radius: 3px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .classifyActive {
        background: linear-gradient(135deg, #ffffff 20%, #f93757 100%);
      }
    }
  }
}
</style>